<script setup>
import WaterFallFlow from './WaterFallFlow.vue'
import MainShowAside from './MainShowAside.vue'
import Detail from './Detail.vue'
import {ref, watch} from 'vue'

const props = defineProps({image_list: Array, isMobile: Boolean})
const openDetailSwitch = ref(false)
const imgUrl = ref("")
const clothInfo = ref({})
const openDetail = (res) => {
  openDetailSwitch.value = true
  clothInfo.value = res.clothInfo
  imgUrl.value = res.src.replace("_small", "")
}
const closeWindow = (res) => {
  openDetailSwitch.value = false
}

const sortBy = ref('type');
const setSort = (res) => {
  sortBy.value = res
  // 排序
  switch (res) {
    case "type":
      imgList.value = [...imgList.value.sort((a, b) => a.clothInfo.cloth_type.localeCompare(b.clothInfo.cloth_type))];
      break
    case "date":
      imgList.value = [...imgList.value.sort((a, b) => new Date(b.clothInfo.buy_time) - new Date(a.clothInfo.buy_time))];
      break
    case "price":
      imgList.value = [...imgList.value.sort((a, b) => parseInt(a.clothInfo.cloth_price) - parseInt(b.clothInfo.cloth_price))];
      break
  }
}
let imgList = ref(JSON.parse(JSON.stringify(props.image_list)))
const updateImgList = (res) => {
  let currentImgList = JSON.parse(JSON.stringify(props.image_list))
  for (const r of res) {
    if (!r.v) {
      continue
    }
    if (r.v.length < 1) {
      continue
    }
    let rv = r.v.toString() === "" ? "未知" : r.v.toString()
    console.log(rv)
    // 筛选
    switch (r.k) {
      case "category":
        currentImgList = currentImgList.filter(img => (img.clothInfo.cloth_type === "" ? "未知" : img.clothInfo.cloth_type) === rv);
        break
      case "color":
        currentImgList = currentImgList.filter(img => rv.includes(img.clothInfo.cloth_color === "" ? "未知" : img.clothInfo.cloth_color));
        break
      case "brand":
        currentImgList = currentImgList.filter(img => rv.includes(img.clothInfo.cloth_brand === "" ? "未知" : img.clothInfo.cloth_brand));
        break
      case "season":
        currentImgList = currentImgList.filter(img => rv.includes(img.clothInfo.cloth_season === "" ? "未知" : img.clothInfo.cloth_season));
        break
    }
  }
  return currentImgList
}
imgList.value = [...updateImgList([])]
const usingFilter = (res) => {
  imgList.value = [...updateImgList(res)]
}
watch(
    () => props.image_list,
    (newVal) => {
      imgList.value = JSON.parse(JSON.stringify(props.image_list))
      console.log(1)
    },
    {deep: true, immediate: true}
)
</script>

<template>
  <div class="main-content">
    <MainShowAside @usingFilter="usingFilter" :images="image_list"></MainShowAside>
    <main class="closet-content">
      <div class="toolbar">
        <div class="sort-options">
          <div
              class="sort-option"
              :class="{ active: sortBy === 'type' }"
              @click="setSort('type')"
          >
            <i class="fas fa-sort-alpha-down"></i> 类型
          </div>
          <div
              class="sort-option"
              :class="{ active: sortBy === 'date' }"
              @click="setSort('date')"
          >
            <i class="fas fa-sort-numeric-down"></i> 日期
          </div>
          <div
              class="sort-option"
              :class="{ active: sortBy === 'price' }"
              @click="setSort('price')"
          >
            <i class="fas fa-sort-amount-down"></i> 价格
          </div>
        </div>


      </div>

      <WaterFallFlow @openDetail="openDetail" :images="imgList" :column-width="isMobile?105:200"
                     :gutter="isMobile?3:15"></WaterFallFlow>


    </main>
  </div>


  <Detail v-if="openDetailSwitch" :clothInfo="clothInfo" :imgUrl="imgUrl" :isMobile="isMobile"
          @closeWindow="closeWindow"></Detail>
</template>

<style scoped>

</style>